<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
<link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">

  <title>select ,onclick,click</title>
  <!-- <link rel="stylesheet" href="script/jquery-ui.1.10.4.css">  <!-- 注意顺序--> 
  <style>
  #tog {
    text-align: center;
    width: 100px;
    height: 100px;
    background: #ccc;
  }

  .row {
    /*行距*/
    margin: 20px; 
  }
  </style>
  <script src="script/jquery-1.10.min.js"></script>
  <!-- <script src="script/jquery-ui.1.10.4.min.js"></script> -->
</head>
<body>

<div class="container">
  <div class="row"> <!-- 第一行-->
    <div class="col-sm-3">
      <button id = "tog_btn1" class="btn btn-danger"> 选择器1 ,3个alert </button>
    </div>

    <div class="col-sm-3">
      <button id = "tog_btn2" class="btn btn-danger"> 选择器2 ,2个alert </button>
    </div>
  </div>


  <div class="row">  <!-- 第二行-->
    <div class="col-sm-3">
        <input type="text" name="" value="123">
    </div>

    <div class="col-sm-3">
        <input type="text" name="" value="456">
    </div>

    <div class="col-sm-3">
      <button class="btn btn-info" onclick="textval()"> 提取input text 使用onclick </button>
    </div>
  </div>


  <div class="row">  <!-- 第三行-->
    <div class="col-sm-3">
        <input type="checkbox" name="" checked="true">
    </div>

    <div class="col-sm-3">
        <input type="checkbox" name="">
    </div>

<!--     <div class="col-sm-3">
      <button class="btn btn-default"> 提取input checkbox 使用click </button>
    </div> -->
  </div>

  <div class="row"> 

      <div class="col-md-offset-1 col-md-6" style="margin-bottom: 10px;margin-top: 20px;" >

        <table class="table">
          <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </thead>
          <tbody>
            <tr><td>张三</td><td>18</td><td>男</td></tr>
            <tr><td>李四</td><td>17</td><td>男</td></tr>
            <tr><td>王五</td><td>16</td><td>男</td></tr>
          </tbody>
        </table>


      </div>
  </div>


  <div class="row"> 

      <div class="col-md-3" style="margin-bottom: 10px;margin-top: 20px;" >

        <div>
          <button class="btn btn-primary" id=1 onclick="onerow(this)">提取第一行</button>
          <!-- 使用this 传递本身对象 -->
        </div>
        <div>
          <button class="btn btn-primary" id="two_row">提取tbody</button>
        </div>
      </div>
  </div>


</div>

<script type="text/javascript">
  
  //第一行 script
  // 类选择器 .号开头，id开头#, 元素直接写
$(".btn-danger").on("click",function(event){

  alert("使用selector选中,通过.btn-danger类")


});


// 级联，中间不能有空格，否则将去 子元素查找
$("button.btn-danger").on("click",function(event){

  alert("使用selector选中,通过 button 类型和.btn-danger类")

});


$("#tog_btn1.btn-danger").on("click",function(event){

  alert("使用selector选中,通过 id 和.btn-danger类")

});

//第二行 script


function textval(){
  //所有input 类型
  // $("input").each(function(index, el) {
  //   alert($(this).val())
  // });
  console.log($(this))//  使用onclick 不能找到 当前元素
  //使用选择器定位,前两个是 挨着写，代表同级
  $("div.row input[type='text']").each(function(index, el) {
    alert($(this).val())
  });
}

//第三行 script

$("div.row").on("click","input[type=checkbox]",function(){
  if ($(this).is(":checked")){

    alert("当前选中");
  }else{
    alert("当前没有选中");
  }
});

//第四行 script
function onerow(obj){
  console.log($(obj).prop("id"))

  $(".table tbody tr:first").children().each(function(index, el) {
    alert($(this).text())
  });


};
//tbody 下的所有tr
$("#two_row").on("click",function(){
  $(".table tbody > tr").each(function(index, el) {
    console.log($(this))
  });
});


</script>




</body>
</html>